﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jqxTouch, Touch Events, Swipe, Orientation, Rotate, Tap, Taphold, Touch"/>
    <meta name="description" content="jqxTouch is providing few useful events for touch devices (swipe, swipeleft, swiperight, swipetop, swipebottom, orientation, tap and taphold). In the demo bellow you can try the swipeleft and swiperight events. Just slide your pointer over the text fields bellow the rhino picture to change the text. To trigger tap event just tap on the rhino picture." />
    <title id="Description">jqxTouch is providing few useful events for touch devices (swipe, swipeleft, swiperight, swipetop, swipebottom, orientation, tap and taphold). In the demo bellow you can try the swipeleft, swiperight and tap events. Just slide your pointer over the text fields bellow the rhino picture to change the text. To trigger tap event just tap on the rhino picture.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtouch.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.rhino-data-field').jqxTouch();
            $('.rhino-picture').jqxTouch();

            function setText(container, text) {
                container.children('div').fadeOut(200, function () {
                    $(this).html('<div>' + text + '</div>').fadeIn(200);
                });
            }

            $('.rhino-data-field').on('swipeleft', function () {
                setText($(this), "You've swiped left");
            });

            $('.rhino-data-field').on('swiperight', function () {
                setText($(this), "You've swiped right");
            });

            $('.rhino-picture').on('tap', function () {
                var pic = $(this);
                if (!pic.is(':animated')) {
                    pic.animate({ marginLeft: 60 }, 180, function () {
                        pic.animate({ marginLeft: 120 }, 160, function () {
                            pic.animate({ marginLeft: 100 }, 140);
                        });
                    });
                }
            });
        });
    </script>
</head>
<body class="default">
    <div id="dataContainer" style="">
        <div class="rhino-header">Rhinoceros</div>
        <table style="width: 100%; ">
            <tbody>
                <tr>
                    <td><div class="rhino-picture"></div></td>
                </tr>
                <tr>
                    <td>
                        <div class="rhino-data">
                            <div class="rhino-data-field rhino-data-field-top"><div>Kingdom <span>Animalia</span></div></div>
                            <div class="rhino-data-field"><div>Phylum <span>Chordata</span></div></div>
                            <div class="rhino-data-field"><div>Class <span>Mammalia</span></div></div>
                            <div class="rhino-data-field"><div>Infraclass <span>Eutheria</span></div></div>
                            <div class="rhino-data-field"><div>Order <span>Perissodactyla</span></div></div>
                            <div class="rhino-data-field"><div>Suborder <span>Ceratomorpha</span></div></div>
                            <div class="rhino-data-field"><div>Superfamily <span>Rhinocerotoidea</span></div></div>
                            <div class="rhino-data-field rhino-data-field-bottom" style="border-bottom-width: 0px;"><div>Family <span>Rhinocerotidae</span></div></div>
                        </div>                        
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <style type="text/css">
        .rhino-picture
        {
            width: 160px;
            height: 160px;
            background-image: url(../../images/rhino.jpg);
            border-radius: 160px;
            -moz-border-radius: 160px;
            -webkit-border-radius: 160px;
            -webkit-box-shadow: 0px 0px 15px 2px rgba(87, 105, 45, 1);
            box-shadow: 0px 0px 15px 2px rgba(87, 105, 45, 1);
            margin-left: 100px;
            margin-top: 12px;
        }
        .rhino-data
        {
            width: 80%;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            overflow: hidden;
            margin-left: 10%;
            border: 1px solid #999999;
            margin-top: 12px;
        }
        .rhino-data-field
        {
            background-color: #f9f9f9;
            padding: 7px;
            border-bottom: 1px solid #e0e0e0;
            font-weight: bold;
            font-family: Sans-Serif;
            font-size: 15px;
        }
        .rhino-data-field-top
        {
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 10px;
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-topright: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .rhino-data-field-bottom
        {
            -webkit-border-bottom-right-radius: 10px;
            -webkit-border-bottom-left-radius: 10px;
            -moz-border-radius-bottomright: 10px;
            -moz-border-radius-bottomleft: 10px;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .rhino-data-field span
        {
            float: right;
            color: #bbb;
        }
        .rhino-header
        {
            width: 100%;
            height: 30px;
            padding-top: 5px;
            padding-bottom: 5px;
            background: #ffffff;
            background: -moz-linear-gradient(top,  #ffffff 0%, #eaeaea 40%, #cecece 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(40%,#eaeaea), color-stop(100%,#cecece));
            background: -webkit-linear-gradient(top,  #ffffff 0%,#eaeaea 40%,#cecece 100%);
            background: -o-linear-gradient(top,  #ffffff 0%,#eaeaea 40%,#cecece 100%);
            background: -ms-linear-gradient(top,  #ffffff 0%,#eaeaea 40%,#cecece 100%);
            background: linear-gradient(to bottom,  #ffffff 0%,#eaeaea 40%,#cecece 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cecece',GradientType=0 );
            font-size: 26px;
            font-family: Sans-Serif;
            text-align: center;
            color: #888;
            font-weight: bold;
            border-bottom: 1px solid #999;
        }
        #dataContainer
        {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: 365px;
            height: 518px;
            background-image: url(../../images/ipadbackground.png);
        }
    </style>
</body>
</html>